so this is the component:
<ReusedHeader
H1headerGray="text... "
H2headerRed="text2 ! "
pheader="p1"
getStarted="button text1"
hrefab="button url 1"
whatWeDo="button text2"
hrefbb="button url 2"
imageSrc="image url"
/>;
the list in the component :
<li className=" hover:ring active:ring-4 w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 md:py-4 md:text-lg md:px-10">
{getStarted}
</li>
And this component I will use in many places; in some places, I want the component without buttons;
You can just pass the needed props and handle the logic within the component
const ReusedHeader = ({buttonsEnabled=true}) => {
if(buttonsEnabled){ // return something }
else { // return something else }
}
Or modify the onClick if you want the same markup without onClick functionality.
onClick={buttonsEnabled? onClick : undefined}